<!--  -->
<template>
   <div class='loginPage'>
     <div class="goback">
       <svg @click="goback" width="10.000000" height="16.000000" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <path id="Vector" d="M3.63574 8L10 14.2227L8.18213 16L0 8L8.18213 0L10 1.77734L3.63574 8Z" fill-rule="evenodd" fill="#ffffff"/>
      </svg>
     </div>
        <transition name="fade" mode="out-in">
            <div class="loginform" v-if="login" key="login">
                <input class="username" type="text" placeholder="请输入账号" v-model="username" />
                <input class="password"  type="password" placeholder="请输入账号" v-model="password" />
                <div class="loginbtn" @click="goLogin">
                    登录
                </div>
            </div>
            <div class="loginform" v-else key="reg">
                <input class="username" type="text" placeholder="请输入账号" v-model="username" />
                <input class="password"  type="password" placeholder="请输入密码" v-model="password" />
                <input class="repassword"  type="password" placeholder="请再次输入密码" v-model="repassword" />
                <div class="loginbtn" @click="goReg">
                    注册
                </div>
            </div>
        </transition>
        <div class="prompt">
            <p v-if="login">没有账户？<span @click="goRegView">注册</span></p>
            <p v-else>已有账户？<span @click="goLoginView">去登陆</span></p>
        </div>
   </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// regUser
import { login } from '@/api/api.js'
import { Toast } from 'vant'
import error from '@/assets/login/error.svg'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      username: '',
      password: '',
      repassword: '',
      login: true
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goback () {
      this.$router.push('/main')
    },
    goReg () {
      Toast.fail('暂未开放注册')
      return ''
      // regUser().then((res) => {
      // })
    },
    goLogin () {
      if (this.username === '' || this.password === '') {
        Toast({
          message: '账号密码不能为空',
          icon: error
        })
        return
      }
      const obj = {
        username: this.username,
        password: this.password
      }
      login(obj).then((res) => {
        if (res.code === 200) {
          this.$store.commit('setToken', res.data.token)
          this.$store.commit('setRefreshToken', res.data.refresh)
          this.$router.push('/main')
        } else {
          Toast({
            message: res.data.msg,
            icon: error
          })
        }
      })
    },
    goRegView () {
      this.login = false
    },
    goLoginView () {
      this.login = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='less' scoped>
.loginPage{
    padding: 0px 30px;
    width: calc(100% - 60px);
    height: 100%;
    background-image: url('../assets/logbg.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff;
}
.loginform{
    // background: #fff;
    // border-radius: 10px;
    // box-shadow: 0px 0px 9px 5px #eee;
    padding: 20px 10px;
    position: absolute;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 25px;
    box-shadow:inset 0 0 6px rgba(255, 255, 255, 0.2);
    color: #ffffff;
    input{
        background: none;
        height: 40px;
        margin: 20px 0px;
        width: 100%;
        border: none;
        outline: none;
        border-bottom: 1px solid #ffffff;
        &::placeholder{
          color: #ffffff;
        }
    }
    .loginbtn{
        margin-top: 20px;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #000000;
        color: white;
        border-radius: 15px;
    }
}
.prompt{
    width: 90%;
    text-align: center;
    position:absolute;
    left: 50%;
    transform: translate(-50%,0);
    bottom: 0px;
    color: #ffffff;
    span{
        border-bottom: 1px solid blue;
    }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.goback{
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
